<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="lib/rollup.browser.js"></script>
    <script src="lib/requireES.js"></script>
    <script src="lib/config.js"></script>
</head>
<body>
    <script type="text/javascript">

    requireES([
        'quark-renderer/src/quark-renderer',
        'quark-renderer/src/graphic/shape/Sector',
        'quark-renderer/src/vml/vml'
    ], function(qrenderer, SectorShape){
        // 初始化qrenderer
        var qr = qrenderer.init(document.getElementById('main'));

        qr.add(new SectorShape({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: -Math.PI / 2,
                endAngle: -Math.PI / 2,
                r0: 50,
                r: 100
            }
        }));

        qr.add(new SectorShape({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: 0,
                endAngle: 0,
                r0: 50,
                r: 100
            }
        }));

        qr.add(new SectorShape({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: Math.PI / 2,
                endAngle: Math.PI / 2,
                r0: 50,
                r: 100
            }
        }));

        qr.add(new SectorShape({
            position: [100, 100],
            scale: [1, 1],
            style: {
                stroke: 'black'
            },
            shape: {
                startAngle: Math.PI,
                endAngle: Math.PI,
                r0: 50,
                r: 100
            }
        }));
    });
    </script>
    <div id="main" style="width:1000px;height:600px;"></div>
</body>
</html>